import React, { Component, PureComponent } from 'react'

class Home extends PureComponent {
  //即将渲染 获取一个时间 
  UNSAFE_componentWillMount() {
    this.beginTime = Date.now()
  }

  render() {
    return <h2>Home</h2>
  }

  //渲染完成再获取一个时间 
  componentDidMount() {
    this.endTime = Date.now()
    
    const interval = this.endTime - this.beginTime
    console.log(`Home渲染时间：${interval}`);
  }
}

class About extends PureComponent {
  //即将渲染 获取一个时间 
  UNSAFE_componentWillMount() {
    this.beginTime = Date.now()
  }

  render() {
    return <h2>About</h2>
  }

  //渲染完成再获取一个时间 
  componentDidMount() {
    this.endTime = Date.now()
    
    const interval = this.endTime - this.beginTime
    console.log(`About渲染时间：${interval}`);
  }
}

export default class App extends Component {
  render() {
    return (
      <div>
        <Home />
        <About />
      </div>
    )
  }
}
